<!-- 添加车辆 -->
<template>
  <view class="addcar">
    <view class="list">
      <view class="input">
        <text>名字</text>
        <input
          class="uni-input"
          type="text"
          @input="onNameChange"
          :value="form.nickName"
          placeholder="请输入名称"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="40"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input"  v-if="!form.id">
        <text>密码</text>
        <input
          class="uni-input"
          type="password"
          @input="onPwdChange"
          :value="form.password"
          placeholder="请输入密码"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="40"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>手机号</text>
        <input
          class="uni-input"
          type="text"
          @input="onMobileChange"
          :value="form.mobile"
          placeholder="请输入手机号"
          placeholder-class="placeholder"
          placeholder-style="color:#C8C8C8;"
          maxlength="20"
        />
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>用户类型</text>
        <picker
          mode="selector"
          @change="onUserTypeChange"
          :range-key="rangeKey"
          :value="form.userType"
          :range="userTypeList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(userTypeList, form.userType) || '请选择用户类型'
            }}</view>
        </picker>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
      <view class="input">
        <text>是否启用</text>
        <picker
          mode="selector"
          @change="onIsEnableChange"
          :range-key="rangeKey"
          :value="form.isEnable"
          :range="isEnableList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(isEnableList, form.isEnable) || '请选择是否启用'
            }}</view>
        </picker>
        <uni-text class="uni-icon uni-right-arrow"><span> 〉 </span></uni-text>
      </view>
    </view>
    <view class="primary" @click="sendAddCar">保存</view>
  </view>
</template>

<script>
export default {
  onLoad(optData) {
    if (optData && optData.stationId){
      this.form.stationId = JSON.parse(optData.stationId);
    }
    if (optData && optData.user){
      this.form = JSON.parse(optData.user);
    }
  },
  data() {
    return {
      stationId: '',
      form:{
        nickName:'',
        mobile:'',
        password:'',
        isEnable: '1',
        userType: '1',
        stationId: '',
      },
      isEnableList: [],
      userTypeList: [],
      rangeKey: 'dictLabel',
    };
  },
  created() {
    this.fetchUserType();
    this.fetchIsEnable();
  },
  methods: {
    fetchUserType() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'station_user_type',
        })
        .then(res => {
          if (res.code === 200) {
            this.userTypeList = res.data;
          }
        });
    },

    fetchIsEnable() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'sys_is_enable',
        })
        .then(res => {
          if (res.code === 200) {
            this.isEnableList = res.data;
          }
        });
    },


    onNameChange(e) {
      this.form.nickName = e.target.value && e.target.value;
    },
    onPwdChange(e) {
      this.form.password = e.target.value && e.target.value;
    },
    onMobileChange(e) {
      this.form.mobile = e.target.value && e.target.value;
    },
    onIsEnableChange(e) {
      this.form.isEnable = this.isEnableList[e.target.value].dictValue;
    },
    onUserTypeChange(e) {
      this.form.userType = this.userTypeList[e.target.value].dictValue;
    },

    sendAddCarReq() {
      if (!this.form.id){
        this.$clApi.haoleiAgentApi
          .fetchStationUserAdd({
            data: this.form,
          })
          .then(res => {
            if (res.code === 200) {
              uni.navigateBack();
            } else {
              this.$utils.toast('保存失败');
            }
          });
      }else{
        this.$clApi.haoleiAgentApi
          .fetchStationUserEdit({
            data: this.form,
          })
          .then(res => {
            if (res.code === 200) {
              uni.navigateBack();
            } else {
              this.$utils.toast('保存失败');
            }
          });
      }

    },

    sendAddCar() {
      this.sendAddCarReq();
    },

  },
};
</script>

<style lang="scss" scoped>
.addcar {
  padding: 20rpx 25rpx;
  background-color: #2a3a52;
  min-height: 100vh;
  .scan {
    margin: 0 auto;
    height: 106rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 10rpx;
    text-align: center;

    font-size: 36rpx;
    font-weight: 400;
    color: #ffe471;
    image {
      position: relative;
      width: 68rpx;
      height: 68rpx;
      top: 20rpx;
      right: 10rpx;
    }
  }
  .list {
    margin: 20rpx 0;
    padding: 20rpx 0;
    border-radius: 20rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    padding: 0 40rpx;
    color: #f6f7f9;
    .input {
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;

      .placeholder {
        color: #f6f7f9;
      }
      .address {
        flex: 1;
        text-align: right;
        padding-right: 30rpx;
        line-height: 20rpx;
        line-height: 40rpx;
        margin-top: 31rpx;
      }

      .addressPlaceholder {
        flex: 1;
        text-align: right;
        color: #999;
        padding-right: 30rpx;
        line-height: 40rpx;
        margin-top: 31rpx;
      }
      input,
      picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }
      .area-city {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
    }
  }
  .primary {
    margin-top: 10rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: #4e6792;
    line-height: 106rpx;
    background: #ffffff;
    border-radius: 10rpx;
  }
  .primarySumbit {
    background-color: #7692bb;
    color: #fff;
  }
  .carKeyboard {
    color: #243836;
  }
  .uni-right-arrow {
    color: #ffe471;
    font-size: 10px;
  }
}
</style>
